<template>
	<view class="content" v-if="user">

		<!-- <image class="fangzi" src="@/static/member/fangzi.png" alt="" @tap="index"></image>

		<view style="width: 480rpx; height: 150rpx; margin: 0 auto; margin-top: 100rpx;">
			<image style="width: 100%; height: 100%;" src="@/static/member/logo.jpg" alt=""></image>
		</view> -->

		<!-- <view class="scroll-container" v-if="show">
			<view id="scroll-text">
				您使用了{{couponName}}
			</view>
		</view> -->

		<view class="popup-container" style="margin-top: 20%;">
			<view class="lessee" v-if="userInfo">
				<view >{{userInfo.orgName?userInfo.orgName:userInfo.orga.name}}</view>
			
			</view>

			<view class="name">
				<view style="margin-left: 15rpx;">{{userInfo.real_name}}</view>
			</view>

			<view class="view_bk" @click="remake()">
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="user.qrCode" :options="{ margin: 0}" size='365'
					sizeUnit="rpx"></uqrcode>
			</view>
			<view class="qianmk" v-if="qm != null" @tap="signature">
				<image class="gui-box-shadow qianming" :src="qm"></image>
			</view>
			<view v-else class="dianji" @tap="signature">{{dianji}}</view>
		</view>

		<view style="width: 85%; height: 95rpx; margin-top: -80rpx; position: absolute; z-index: 100; margin-left: 7%;">
			<image style="width: 100%; height: 100%;" src="@/static/member/6_resize.jpg" alt=""></image>
		</view>

		<view style="width: 100%; height: 750rpx; margin: 0 auto; margin-top: -430rpx; position: relative; z-index: 0;">
			<image style="width: 100%; height: 100%;" src="@/static/member/5_resize.png" alt=""></image>
		</view>

		<view  class="hang" style=" margin-top: -250rpx; font-size: 40rpx;">
			<view class="" v-for="(item, idx) in rych" :key="idx">
				<view class="">{{item.name}}</view>
			</view>
		</view>

		
		

	</view>
</template>

<script>
	// import graceJS from "@/Grace6/js/grace.js"
	export default {
		data() {
			return {
				user: [],
				userInfo:null,
				qm: null,
				rych: [],
				hang: null,
				dianji: null,
				memberData: null, // 物供选择方案
				cards: {}, // 卡券
				products: [], // 优惠券
				// show: false,
				// couponName: '',
				SetInterval: null,
			}
		},
		created() {
			let self = this
			self.user = uni.getStorageSync("member");
			this.userInfo=uni.getStorageSync("userInfo");
			
			console.log("member->onload->user", self.user);
			self.timestamp();
			self.honor();
			//self.scheme();
			// self.remake();
		},

		methods: {
			scheme() {
				var self = this
				let url = '/app/member_data/list'
				let parm = {
					type: 'wy_2025'
				}
				self.$boya.NGet(url, parm, function(res) {
					console.log('scheme: ', res.data[0]);
					self.memberData = res.data[0]
					if (res.data[0].data1 == "A") {
						self.get_all_coupon();
					} else if (res.data[0].data1 == "B") {
						self.get_all_card();
					}
				}, err => {
					console.log('err: ', err);
				}, false, false)
			},
			get_all_card() {
				let self = this
				self.$boya.NPost("/app/card_bag/get_all", {
					type: 0
				}, function(res) {
					// console.log("cards：", res.data.wallet);
					if (res.code == 200) {
						let card = res.data.wallet
						for (var i = 0; i < card.length; i++) {
							let idx = i
							if (card[i].wallet_type.name == "2025年工会会员五一节日慰问自提券") {
								self.cards = card[i]
							}
						}
						console.log("卡券：", self.cards);
					}
				});
			},
			get_all_coupon() {
				let self = this;
				this.$boya.NPost("/app/card_bag/get_all_coupon", {
					type: 1,
				}, function(res) {
					if (res.data) {
						let data = res.data;
						let coupon = []
						for (var i = 0; i < data.length; i++) {
							if (data[i].coupon) {
								coupon.push(data[i].coupon);
							}
						}
						// console.log('优惠券: ', coupon);
						if (coupon.length > 0) {
							self.products = coupon.filter(item => item['activity_type'] === 'wy_2025');
						}
						console.log('优惠券优惠券: ', self.products);
					}
				}, null, {
					showLoading: false
				});
			},
			guimodalOK() {
				let self = this
				self.$refs.guimodal.close();
			},
			timestamp() {
				let self = this
				// console.log('qrCode1: ', self.user.qrCode);
				// 截取二维码编码
				let qrCode = self.user.qrCode
				let dataArray = qrCode.split(",");
				// console.log('dataArray: ', dataArray[0]);

				let now = new Date();
				// 设置当天的 23:59:59
				now.setHours(23);
				now.setMinutes(59);
				now.setSeconds(59);
				now.setMilliseconds(999);
				// 获取时间戳
				let timestamp = now.getTime();
				// console.log("timestamp: ", timestamp);

				// 赋予新的值
				self.user.qrCode = dataArray[0] + ',' + timestamp
				console.log('qrCode2: ', self.user.qrCode);
			},
			lanternRiddles() {
				let self = this
				this.$boya.NGet("/tpi/mcode", null, function(res) {
					// console.log("mcode", res);
					uni.navigateTo({
						url: '/pages/activities/lanternRiddles/index?code=' + res.data
					})
				}, function(err) {
					uni.showToast({
						title: "登录过期，请重新登录！"
					})
					uni.reLaunch({
						url: "/pages/login/login"
					})
				})
			},
			holidayGift() {
				let self = this
				if (self.memberData != null && self.memberData.data2 != 1) {
					self.$refs.guimodal.open();
				}
				// self.$boya.msg('敬请期待');
			},
			index() {
				uni.reLaunch({
					url: "/pages/switchPages/main?p=index"
				})
			},
			honor() {
				let self = this
				console.log('medal_ids: ', self.user.medal_ids);
				let ids = {
					ids: self.user.medal_ids
				}
				this.$boya.NPost("/app/user_vip/user_sign", {
					lg_id: self.user.lg_id,
				}, function(res) {
					console.log('正确: ', res);
					self.qm = res.data.sign
				}, function(err) {
					console.log('错误: ', err);
					self.dianji = '点 击 签 名'
					self.$boya.msg('用户无签名，请点击签名')
				})
				this.$boya.NPost("/app/user_vip/medal", ids, function(res) {
					console.log('shuju: ', res);
					self.rych = res.data
					
				
				}, function(err) {
					console.log('user_vip错误: ', err);
				});
			},
			signature() {
				uni.navigateTo({
					url: '/pages/member/signature'
				})
			},
			remake() {
				this.$refs.uqrcode.remake({
					success: () => {},
					fail: err => {}
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url('../../static/member/1_resize.png') 100% 100% / 100% 100%;
	}

	.fangzi {
		position: absolute;
		right: 30rpx;
		top: 85rpx;
		width: 60rpx;
		height: 60rpx;
		// padding: 95rpx 20rpx 0 10rpx;
	}

	.popup-container {
		width: 100%;
		height: 1000rpx;
		margin: 0 auto;
		// background-color: rgba(255, 255, 255, 0.5);
		background: url('../../static/member/2_resize.png') 100% 100% / 100% 100%;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
	}

	.avatar {
		// width: 150rpx;
		// height: 150rpx;
		border-radius: 50%;
		// margin-top: -200rpx;
		// background-color: white;

		image {
			width: 250rpx;
			height: 225rpx;
			border-radius: 50%;
		}
	}

	.lessee {
		font-size: 40rpx;
		text-align: center;
		color: white;
		margin-top: -20rpx;
		display: flex;
		justify-content: center;
		
	}

	.lessee_name {
		margin-left: -50rpx;
	}

	.lesseeName {
		width: 65%;
		margin-left: -50rpx;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.name {
		width: 600rpx;
		height: 70rpx;
		margin-left: -12rpx;
		line-height: 70rpx;
		font-size: 55rpx;
		font-weight: bold;
		text-align: center;
		color: white;
		margin-top: 30rpx;
		background: linear-gradient(to right, #F66978, #F79748);
		border-radius: 10rpx;
	}

	.dzhyz {
		display: flex;
		align-items: center;
	}

	.badge-text {
		font-size: 16rpx;
		text-align: center;
		color: #fff;
		margin-top: 10px;
		background-color: red;
		padding: 12rpx 10rpx;
		border-radius: 80rpx;
		// box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		width: auto;
		height: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.child {
		position: absolute;
		// bottom: -260rpx;
		bottom: 0;
		right: 20rpx;
	}

	.view_bk {
		margin-top: 45rpx;
		width: 370rpx;
		height: 370rpx;
		// background-color: red;
		// background-image: url('@/static/member/vip_bk.png');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 20px solid white;
		border-radius: 30rpx;
	}

	.dianji {
		// width: 180rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-bottom: 1px solid black;
		margin-top: 10rpx;
		font-size: 30rpx;
		// border-radius: 20rpx;
		// background-color: rgba(255, 255, 255, 0.9);
	}

	.xiugai {
		width: 200rpx;
		margin: 0 auto;
		text-align: center;
		border-radius: 15rpx;
		margin-top: 50rpx;
		background-color: #fff;
	}

	.qianming {
		width: 300rpx;
		height: 160rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 10rpx;
	}

	.hang {
		color: #16389E;
		text-align: center;
		position: relative;
		padding-bottom: 100rpx;
	}

	.hint {
		background-color: white;
		width: 550rpx;
		margin: 0 auto;
		border-radius: 10rpx;
	}

	.title {
		padding-top: 20rpx;
		font-size: 35rpx;
		text-align: center;
	}

	.scheme {
		padding: 20rpx 45rpx;
		line-height: 1.5;
	}

	.scroll-container {
		position: absolute;
		z-index: 5;
		width: 80vw;
		margin-left: 70rpx;
		margin-top: -12rpx;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		background-color: white;
		border-radius: 15rpx;
		padding: 10rpx 0;
	}

	#scroll-text {
		animation: scroll-left 1s linear 1;
		/* 设置文字动画效果 */
	}

	@keyframes scroll-left {
		0% {
			transform: translateY(15rpx);
		}

		100% {
			transform: translateY(0);
		}
	}
</style>